<template>
  <div class="newBox">
    <button class="bt wt-120" @click="handleBulid()">新增护理项目</button>
  </div>
  <div class="baseList">
    <div class="tableBoxs">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table
        row-key="index"
        :data="data"
        :columns="columns"
        :table-layout="tableLayout ? 'auto' : 'fixed'"
        :show-header="showHeader"
        :loading="dataLoading"
        lazy-load
      >
        <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
        <!-- 图片预览及展示 -->
        <template #image="{ row }">
          <div class="tdesign-demo-image-viewer__base">
            <t-image-viewer :images="[row.image]">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image">
                  <img
                    alt="test"
                    :src="row.image"
                    class="tdesign-demo-image-viewer__ui-image--img"
                  />
                  <div
                    class="tdesign-demo-image-viewer__ui-image--hover"
                    @click="open"
                  >
                    <span> <BrowseIcon size="1.4em" /> 预览 </span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
          </div>
        </template>
        <!-- 价格拼接 -->
        <template #price="{ row }">
          {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
        </template>
        <!-- 操作栏 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl">删除</a>
            <a class="font-bt" @click="handleEdit(row)">编辑</a>
            <a class="delete">禁用</a>
          </div>
        </template>
      </t-table>
    </div>
    <t-pagination
      :total="total"
      v-if="total > 10"
      v-model="pagination.pageNum"
      v-model:pageSize="pagination.pageSize"
      @change="onPageChange2"
    />
  </div>
</template>

<script setup lang="jsx">
import { COLUMNS } from '../constants'
import { ref } from "vue";

/* 接收父组件传递过来的属性 */
const props = defineProps({
    data: {
        type: Object,//定义类型
        default: () => { }//给默认初始化值，为空
    },
    total: Number,
    pagination: {
        type: Object,//定义类型
        default: () => { }//给默认初始化值，为空
    },
    dataLoading: {
        type: Boolean,
        default: false
    },
    searchData: {
        type: Object,
        default: () => { }
    }
})
/* 定义接收父组件传递过来的方法 */
const emit = defineEmits(['onPageChange','handleBulid', 'handleEdit'])
/* 执行单击触发翻页事件 */
const onPageChange2 = (val) => {
    emit('onPageChange', val)
}

const tableLayout = ref(false);
const showHeader = ref(true);
const columns = ref(COLUMNS);

const pagination = ref({
    pageSize: 5,
    pageNum: 1,
});

const isDecimals = (val) => {
    if (String(val).indexOf('.') > -1) {
        return true
    } else {
        return false
    }
}

//新增按钮使用传递过来的方法
const handleBulid = () =>{
  emit('handleBulid')
}

const handleEdit = (row) =>{
  emit('handleEdit', row)
}
</script>